<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea maxlength="120" placeholder="请输入要BB的内容（最多吐槽120字）" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, index) in comments" :key="item.add_time+index">
                <div class="cmt-title">
                    第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{(item.content === 'undefined' || item.content === '')?'此用户很懒，没写评论':item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        pageIndex: 1,//默认展示第一页数据
        comments: [],//所有的评论数据
        msg: ''
      }
    },
    props: ["id"],
    created() {
      this.getComments()
    },
    methods: {
      getComments() {
        //获取评论
        this.$http.get(this.COMMON.apiList["评论信息1"] + this.id + this.COMMON.apiList["评论信息2"] + this.pageIndex).then(response => {
          if (response.body.status === 0) {
            // 每当获取评论数据的时候，不把老数据清空
            this.comments = this.comments.concat(response.body.message)
          } else {
            Toast("加载评论失败")
          }
        })
      },
      getMore() {
        //加载更多评论
        this.pageIndex += 1
        this.getComments()
      },
      postComment() {
        //校验评论内容
        if (this.msg.trim().length === 0) {
          return Toast("评论内容不能为空")
        }
        //发表评论
        this.$http.post(this.COMMON.apiList["提交评论"] + this.id, {content: this.msg.trim()}).then(function (response) {
          if (response.body.status === 0) {
            //拼接出一个评论对象
            var cmt = {
              user_name: '匿名用户', add_time: Date.now(), content: this.msg.trim()
            };
            this.comments.unshift(cmt)
            this.msg = ''
          } else {
            Toast("评论失败")
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .cmt-container {
        h3 {
            font-size: 18px;
        }
        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list { // 评论列表
            margin: 5px 0;
            .cmt-item { //每一个评论
                font-size: 13px;
                .cmt-title { // 评论标题
                    line-height: 30px;
                    background-color: #cccccc;
                }
                .cmt-body { // 评论内容
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>